<template>
  <div>
    <el-timeline>
      <el-timeline-item
        v-for="item of timeline"
        :key="item.id"
        :timestamp="item.logTime"
        placement="top"
        v-loading="timelineLoading"
      >
        <el-card>
          <h3>操作日志</h3>
          <p>{{ item.logDescription }}</p>
          <div>
            <i class="iconfont icon-ico-"></i>
            <el-tag size="mini" type="danger">{{ item.logOperation }}</el-tag>
          </div>
        </el-card>
      </el-timeline-item>
    </el-timeline>
    <el-pagination
      style="text-align: center"
      :current-page="paging.current"
      :page-sizes="paging.pageSizes"
      :page-size="paging.size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="paging.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script>
import { getOperation } from "@/api/operation";
export default {
  data() {
    return {
      paging: {
        total: 0,
        current: 1,
        pageSizes: [5, 10, 15],
        size: 5,
      },
      timelineLoading: false,
      timeline: [],
    };
  },
  created() {
    this.timelineLoading = true;
    this.getData();
  },
  methods: {
    getData() {
      const form = {
        page: this.paging.current,
        pageSize: this.paging.size,
        accountId: this.$store.getters.accountId,
      };
      getOperation(form)
        .then((res) => {
          console.log(res.data);
          this.timeline = res.data.operationLogs;
          this.paging.total = res.data.totalCount;
          this.timelineLoading = false;
        })
        .catch(() => {
          this.list = [];
          this.paging.total = 0;
          this.timelineLoading = false;
        });
    },
    handleSizeChange(val) {
      this.paging.size = val;
      this.getData();
    },
    handleCurrentChange(val) {
      this.paging.current = val;
      this.getData();
    },
  },
};
</script>

<style lang="scss" scoped>
</style>
